<template>
	<view class="">

		<view class="body">
			<view class="top-container no-bottom-padding">
				<uni-list :border="false">
					<uni-list-item :border="false" title="来料检验单号" :rightText="header.billNo" />
					<uni-list-item :border="false" title="称重申请单号" :rightText="header.weightNo" />
					<uni-list-item :border="false" title="日期">
						<template v-slot:footer>
							<uni-dateformat :date="header.createTime" format="yyyy年MM月dd日" style="font-size: 20px; color: #000000;">
							</uni-dateformat>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
			<template v-if="detail && detail.length > 0">

				<view class="" v-for="(item,index) in detail" :key="index">
					<view class="panel">

						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">物料编码：</view>
									<view class="panel_content_row_item_value">{{ item.materialNo }}</view>
								</view>
							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">名称：</view>
									<view class="panel_content_row_item_value">{{ item.materialName }}</view>
								</view>
							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">规格：</view>
									<view class="panel_content_row_item_value">{{ item.specification }}</view>
								</view>
							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">单位：</view>
									<view class="panel_content_row_item_value">{{ item.unitName }}</view>
								</view>
							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">检验数量：</view>
									<view class="panel_content_row_item_value">{{ item.inspectQty }}</view>
								</view>
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">合格数量：</view>
									<view class="panel_content_row_item_value">
										{{item.qualifiedQty}}</view>
								</view>

							</view>
						</view>
	<view class="panel_content">
									<view class="panel_content_row">
										<view class="panel_content_row_item">
											<view class="panel_content_row_item_title">是否检查：</view>
											<switch :checked="item.isChecked" @change="switch1Change($event,index)" />

										</view>
									</view>
								</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">不合格数量：</view>
									<view class="panel_content_row_item_value_input">
										<view class="panel_content_row_item_value_input">
											<input style="width: 40px" v-model="item.unqualifiedQty" :disabled="item.isChecked" placeholder="请输入不合格数量"
											 placeholder-class="input_placeholder" @input="handleQuality(item)" />
										</view>
									</view>
								</view>
							
							</view>
						</view>

						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">批号：</view>
									<view class="panel_content_row_item_value">{{ item.flot }}</view>
								</view>

							</view>
						</view>
					</view>

				</view>

			</template>

			<view class="panel">
				<!--  底部按钮  -->

				<view class="footerPanelgx">

					<view class="footerPanelgx_body">

						<button @click="auditInspect()" class="footerBtngx save" :disabled="butClick"><i class="iconfont icon-duihao btn_icon"></i>审核
						</button>

					</view>
				</view>
			</view>
		</view>

		<!--  底部按钮  -->
		<!-- <view class="footerPanel">

			<view class="footerPanel_body">

				<button @click="auditOtherInspect()" class="footerBtn save" :disabled="butClick"><i class="iconfont icon-duihao btn_icon"></i>审核
				</button>

			</view>
		</view> -->
	</view>
</template>

<script>
	import uniTransition from 'uni_modules/uni-transition/components/uni-transition/uni-transition.vue';

	import {
		otherInspectDetail,
		auditOtherInspect,
		changeOtherInspectIsChecked
	} from '@/utils/api.js'

	export default {
		components: {

		},
		data() {
			return {
				billNo: '',
				loading: true,
				header: {},
				detail: [],
				materialList: [],
				butClick: false
			}
		},
		methods: {
			//修改是否检查的状态
			switch1Change(e, index) {
				let _this = this
				let val = this.detail[index]
				changeOtherInspectIsChecked({
					val: val,
					isChecked: e.detail.value
				}).then(res => {
					if (res.data.status == 200) {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
						_this.initData()
					}

				})
			},

			//审核来料检验单
			auditOtherInspect() {
				//添加校验，必须全部检查后允许审核
				let check = this.detail.every(function(i) {
					return i.isChecked == true;
				})
				if (!check) {
					uni.showToast({
						title: '请全部检验后审核'
					})
					return
				}
				let self = this;
				uni.showModal({
					title: '提示',
					content: '确认审核',
					success(res) {
						if (res.confirm) {
							try {
								auditOtherInspect({
									billNo: self.billNo,
									unqualifiedQty: self.detail[0].unqualifiedQty,
									qualifiedQty: self.detail[0].qualifiedQty
								}).then(result => {
									if (result.data.status !== 200) {
										return
									}
									uni.showToast({
										title: '审核成功',
										icon: 'none'
									})
									setTimeout(() => {
										uni.navigateBack({
											delta: 1,
											success() {
												uni.$emit('update', {
													msg: '页面刷新'
												});
											}
										})
									}, 1000)
								})
							} catch (e) {
								console.log(e)
							}
						}
					}
				})
			},
			//填写合格数量
			handleQuality(e) {
				if (e.unqualifiedQty <= e.inspectQty) {
					const v = e.unqualifiedQty
					const zero = /^(0{2,})|[^0-9]/g
					let final = 0
					if (!v) {
						final = 0
					} else {
						final = v.toString().replace(zero, (v) => {
							return 0
						})

						if (final.split('')[0] * 1 === 0) {
							final = final.slice(1) - 0 || 0
						}
					}
					this.$nextTick(() => {
						e.unqualifiedQty = final.toString() || '0'
					})
					//不合格数量不允许大于检验数量	
					e.qualifiedQty = e.inspectQty - e.unqualifiedQty
				} else {
					uni.showToast({
						title: '不合格数量不允许大于检验数量',
						icon: 'none'
					})
					e.unqualifiedQty = 0
					e.qualifiedQty = e.inspectQty
				}

			},

			// 获取详情数据
			initData() {
				otherInspectDetail({
					billNo: this.billNo
				}).then(res => {
					this.header = res.data.data.data
					this.detail = res.data.data.dataList
				})
			}
		},
		watch: {
			userInfo() {
				console.log(this.userInfo())
			}
		},
		onLoad(e) {
			this.billNo = e.billNo
			// 获取详情数据
			this.initData()

		}
	}
</script>

<style lang="scss" scoped>
	@import "../../static/css/common";

	/* 调整列表项左右文字大小 */
	::v-deep .uni-list-item__content-title {
		font-size: 20px !important;
		/* 左侧标题字体大小 */
		padding-left: 5px;
	}

	::v-deep .uni-list-item__extra-text {
		font-size: 20px !important;
		/* 右侧内容字体大小 */
		padding-right: 5px;
		color: #333;
	}

	/* 调整行间距 */
	::v-deep .uni-list-item__container {
		padding: 3px 0 !important;
		/* 减小上下内边距 */
		min-height: 10px !important;
		/* 减小最小高度 */
	}

	.panel {
		background: #fbffe2;
		border-radius: 16rpx;
		// box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
	}

	/* 调整标题样式 */
	.panel_content_row_item_title {
		font-size: 17px !important;
		/* 调大字体 */
		color: #000000 !important;
		/* 纯黑字体 */
		flex-shrink: 0;
		/* 防止压缩 */
	}

	/* 调整标题样式 */
	.panel_content_row_item_value {
		flex: 1;
		font-size: 17px !important;
		/* 数值特别放大 */
		color: #333 !important;
	}

	/* 调整输入框容器 */
	.panel_content_row_item_value_input {
		height: 40px;
		flex: 1;
		/* 占据剩余空间 */
		margin-left: 10px;
		/* 增加左右间距 */
	}

	/* 不合格数量输入框强化 */
	.panel_content_row_item_value_input {
		flex: 1;

		input {
			width: 180px !important;
			/* 加宽输入框 */
			height: 18px !important;
			/* 加高输入框 */
			font-size: 22px !important;
			/* 加大字体 */
			// border: 2px solid #ff9800 !important; /* 橙色边框 */
			// padding: 0 12px !important;
			border-radius: 6px;
		}
	}

	// 底部按钮
	.footerPanelgx {
		height: 90px;
		width: 100%;

		.footerPanelgx_body {
			display: flex;
			justify-content: center;
			// gap: 20px;
			padding: 0 20px;
			justify-content: flex-start !important;
			/* 左对齐 */
			padding-left: 20px !important;

			/* 左侧留白 */
			.footerBtngx {
				height: 55px;
				margin: 0 5px;
				display: flex;
				line-height: 1;
				font-size: 16px;
				border-radius: 4px;
				align-items: center;
				justify-content: center;
				box-shadow: 0 0 5px rgba(201, 201, 201, 0.5);
				color: #fff;

				&.save {
					background-color: $uni-color-success;
					width: 150px;
					flex-shrink: 0;
				}
			}

			.btn_icon {
				margin-right: 8px;
			}
		}
	}
</style>
